﻿@*@{
    Layout = null;          //用户注册页面
}*@
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>青橙酒店</title>
    <link rel="stylesheet" href="/layuimini/lib/layui-v2.6.3/css/layui.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>

    <div style="height:50px;width:5px;"></div>
    <div style="width:1200px; margin:auto;">
        <div style="margin-left:50px; float:left;">
            <div style="border:1px solid #D3D3D3; width:650px; height:50px;">
                <div class="layui-font-green" style="font-size:22px; float:left; position:relative; top:9px; left:9px;">账号注册</div>
            </div>
            <form class="layui-form" lay-filter="example" method="post">
                <div style="border-right:1px solid #D3D3D3; border-bottom:1px solid #D3D3D3; border-left:1px solid #D3D3D3; width:650px; height:435px; padding-top:20px; ">
                    <div class="layui-form-item">
                        <label class="layui-form-label required" style="width:100px;">姓名：</label>
                        <div class="layui-input-block" style="width:500px;">
                            <input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="layui-input" lay-verify="required" lay-reqtext="请输入姓名">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100px;">手机号：</label>
                        <div class="layui-input-block" style="width:500px;">
                            <input type="text" name="phone" maxlength="11" lay-verify="required" lay-reqtext="请输入手机号" autocomplete="off" placeholder="请输入手机号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100px;">身份证号：</label>
                        <div class="layui-input-block" style="width:500px;">
                            <input type="text" name="ID_Card" maxlength="18" lay-verify="required" lay-reqtext="请输入身份证号码" autocomplete="off" placeholder="请输入身份证号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100px;">性别：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="男" title="男" checked="">
                            <input type="radio" name="sex" value="女" title="女">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100px;">密码：</label>
                        <div class="layui-input-block" style="width:500px;">
                            <input type="password" maxlength="18" name="password" placeholder="请输入密码" onchange="Checkpassword()" lay-verify="required" lay-reqtext="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100px;">确认密码：</label>
                        <div class="layui-input-block" style="width:500px;">
                            <input type="password" maxlength="18"  name="Confirmpassword" placeholder="请再次输入密码" onchange="ConfirmPassword()" lay-verify="required" lay-reqtext="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100px;">地址：</label>
                        <div class="layui-input-block" style="width:500px;">
                            <input type="text" name="Address" lay-verify="title" autocomplete="off" placeholder="请输入地址" class="layui-input">
                        </div>
                    </div>
                </div>
                <div style="border-right:1px solid #D3D3D3; border-bottom:1px solid #D3D3D3; border-left:1px solid #D3D3D3; width:650px; height:50px; ">
                    <div class="layui-form-item" style="margin-left:140px;">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="Register" style="width:150px; margin-top:6px;">注册</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div style="float:right;">
            <img src="~/img/shangxin.jpg" style="width:450px;height:450px;" />
        </div>
    </div>

    <script src="/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        
        layui.use(['form'], function() {
            var form = layui.form,
                layer = layui.layer;
                $ = layui.$;
            var checkPasswordState = false;

           window.Checkpassword = function() {
                var password = $("input[name='password']");
                if (password.next().length > 0) {
                    password.next().remove()
                }
                if (password.val().length < 6 || password.val().length > 18) {
                    password.parent().append("<label style='color:red;font-size:10px;'>密码长度为6-18位</label>")
                    checkPasswordState = false;
                    return false;
                }
               checkPasswordState = true;
                return true;
            }

           window.ConfirmPassword = function() {
                var password = $("input[name='password']").val();
                var ConfirmPassword = $("input[name='Confirmpassword']");
                if (ConfirmPassword.next().length > 0) {
                    ConfirmPassword.next().remove()
                }
                if (password != ConfirmPassword.val()) {
                    ConfirmPassword.parent().append("<label style='color:red;font-size:10px;'>两次输入的密码不一致</label>")
                    checkPasswordState = false;
                    return false;
                }
                checkPasswordState = true;
                return true;
            }
            form.on("submit(Register)", function(data){
                console.log(data);
                ConfirmPassword();
                if (!checkPasswordState) {
                    layui.msg("请检查密码");
                    return false;
                } else {
                    $.ajax({
                        url:"/Account/Register",
                        type:"post",
                        data:data.field,
                        success: function(res) {
                            layer.msg(res.msg)
                            debugger;
                            if(res.isSuccess){
                                window.location.href = res.data;
                            } 
                        } 
                    });
                    return false;
                }
            })
        })
    </script>

</body>
</html>
